<template>
	<view class="orderWrap">
		<!-- 选项 -->
		<uni-scroll id="scroll" style="width: 100%;" :navList="tabBars" :value="tabIndex" @change="Scrochange" @input="ScroInput"
		 :nav-per-view="5.5"></uni-scroll>
		<!-- 滑动切换 -->
		<view>
			<swiper class="swiper " @change="changeSwiper" :current="tabIndex" :style="{height:searchHeight+'px'}" v-if="!shopLoad">
				<swiper-item class="swiper-item" v-for="(item,index) in tabBars" :key="index">
					<scroll-view class="swiper_scroll" :scroll-y="true" @scrolltolower="getmoreNews">
						<order-list @todetail="todetail" @login="login" @cancelOrder="cancelOrder($event)" @confirmReceipt="confirmReceipt($event)" @tologistics="tologistics" v-model="orders[index]" :type='3' :scNoPic="scNoPic" :width="width"></order-list>
						<uni-load-more :loadingType="loadingType" :contentText="contentText" v-if="orders[index].length"></uni-load-more>
					</scroll-view>
				</swiper-item>
				<shop-loading v-if="shopLoad"></shop-loading>
			</swiper>
			<view class="load" v-if="shopLoad">
				<image :src="Url+'add_images/shop-logo.gif'"></image>
			</view>
		</view>
		<uni-login ref='login' @success="loginSuccess"></uni-login>
		<sc-home></sc-home>
	</view>
</template>

<script>
	import orderList from '@/components/order/orderlist.vue'
	import uniScroll from '@/components/uni-scroll/uni-scroll.vue';
	import uniLoadMore from '@/components/uni-load-more.vue';
	import {groupOrderList,skillNormalOrderList, cancel,assemblecancel,receivingGoods } from '@/common/order.js';
	import list from '@/mixins/list.js'
	export default {
		components: {
			orderList,
			uniScroll,
			uniLoadMore
		},
		data() {
			return {
				Url: this.Imgurl,
				tabIndex: 0,
				tabBars: ['全部', '未支付', '待成团', '待发货', '待收货', '已完成', '拼团失败'],
				searchHeight: 0,
				orders: ['全部', '未支付', '待成团', '待发货', '待收货', '已完成', '拼团失败'],
				shopLoad: true,
				scNoPic:'add_images/no_grouporder.png',
				width:'30%',
				beginflag: true,
			};
		},
		mixins: [list],

		mounted() {
			let that = this;
			this.$nextTick(function() {
				uni.getSystemInfo({
					success: function(res) {
						const query = uni.createSelectorQuery()
						query.select('#scroll').boundingClientRect(data => {
							that.searchHeight = res.windowHeight - data.height;
						}).exec();
					}
				});
			})
		},
		onShow() {
			this.getData()
		},
		methods: {
			cancelOrder(e){
				console.log("触发取消订单",e)
				assemblecancel({id:e.id}).then(res=>{
					console.log(res)
					if(res.code == 1){
						this.orders[this.tabIndex].splice(e.key,1)
					}
					this.toast(res.msg)
				}).catch()
				
			},
			confirmReceipt(e){
				console.log("触发确认收货",e)
				receivingGoods({id:e.id,type:e.type}).then(res=>{
					if(res.code == 1){
						if(this.tabIndex != 0){
							this.orders[this.tabIndex].splice(e.key,1)
						}else{
							this.orders[this.tabIndex][e.key].state = 5
						}
					}
					this.toast(res.msg)
					console.log(res)
				}).catch()
			},
			login() {
				console.log("触发")
				if(uni.getSystemInfoSync().version){
				   this.$refs.login.show = true;	
				}
			},
			loginSuccess(){
				uni.setStorageSync('mineRefresh','true');
				this.getData()
			},
			ScroInput(index, item) {
				// console.log(index,item)
				this.tabIndex = +index;
				this.getData()
			},
			changeSwiper(e) {
				console.log("滑动", e);
				this.tabIndex = +e.detail.current
				this.getData()
			},
			Scrochange(e) {
				// console.log(e)
			},
			ontabtap(e) {
				this.tabIndex = e;
				this.getData()
				// let index = e.target.dataset.current || e.currentTarget.dataset.current;
				// this.switchTab(index);
			},
			todetail(id) {
				uni.navigateTo({
					url: '/pageD/order/orderdetail?id=' + id + '&type_state=3' //type_state:区分商品类型（0：秒杀商品，1：普通商品，2：积分商品，3：拼团商品）
				})
			},
			tologistics(key) {
				uni.navigateTo({
					url: '/pageD/logistics/logistics?id=' + key
				})
			},
			initialArray() {
				console.log("初始化前的数组", this.orders)
				var that = this
				this.orders.forEach(function(item, index) {
					that.orders[index] = []
				})
				console.log("初始化后的数组", this.orders)
			},
			getData() {
				this.shopLoad = true;
				if (this.beginflag) {
					this.initialArray()
					this.beginflag = false
				}
				let state = ''
				if (this.tabIndex > 0) {
					state = this.tabIndex
				}
				let params = {
					state: state,
					invite: '',
					page: '1'
				}
				console.log('params', params)
				groupOrderList(params).then(res => {
					console.log("获取拼团订单 列表", res)
					if (res.code == 1) {
						if (res.msg.data.length) {
							const { orders } = this;
							orders[this.tabIndex] = res.msg.data;
							let da = JSON.parse(JSON.stringify(orders))
							this.orders = da
							console.log("订单" + this.tabIndex, this.orders)
							this.page = res.msg.current_page
							this.last_page = res.msg.last_page
							uni.hideLoading();
							uni.stopPullDownRefresh();
							this.loadingType = res.msg.last_page > 1 ? 0 : 2;
						}else{
							this.orders[this.tabIndex] = []
						}
						this.shopLoad = false;
					} else {
						this.shopLoad = false;
						uni.hideNavigationBarLoading();
						uni.stopPullDownRefresh();
					}

				}).catch()
				
			},
			getmoreNews() {
				if (this.loadingType !== 0) { //loadingType!=0;直接返回
					return false;
				}
				this.loadingType = 1;
				uni.showLoading({
					title: '加载中'
				});
				if (this.page == this.last_page) {
					uni.hideLoading();
					uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
				} else {
					this.page++;
					let state = ''
					if (this.tabIndex > 0) {
						state = this.tabIndex
					}
					let params = {
						page: this.page,
						state: state,
						invite: ''
					}
					var that = this
					groupOrderList(params).then(res => {
						var itemProduct = res.msg.data
						that.orders[this.tabIndex] = that.orders[this.tabIndex].concat(itemProduct)
						this.loadingType = this.page == this.last_page ? 2 : 0
					}).catch()
					uni.hideLoading();

				}
			},
		}
	};
</script>

<style lang="less" scoped>
	.load {
		image {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 100upx;
			height: 100upx;
		}
	}

	.orderWrap {
		height: 100vh;
		overflow: hidden;
		padding-bottom: 20upx;
		box-sizing: border-box;
	}

	.swiper {
		display: flex;
		width: 100%;
		height: 100%;

		.swiper-item {
			flex: 1;
			flex-direction: row;
		}
	}

	.swiper_scroll {
		width: 100%;
		height: 100%;
	}

	.scroll_nav {
		left: 0;
		top: 0;
		z-index: 10;
		display: flex;
		width: 100%;
		height: 80upx;
		white-space: nowrap;
		flex-direction: row !important;
		background-color: #ffffff;

		.order_name {
			display: inline-block;
			font-size: 32upx;
			color: #333333;
			padding: 0 30upx;
			line-height: 80upx;
			box-sizing: border-box;

			.uni-tab-item-title {
				position: relative;
				z-index: 10;
			}

			.line {
				width: 120%;
				height: 16upx;
				border-radius: 8upx;
				background-color: #FFD4D9;
				position: absolute;
				bottom: 20upx;
				left: 50%;
				transform: translate(-50%);
				z-index: -1;
			}
		}

		.order_name_current {
			color: #FF2842;
		}
	}

	.no_order {
		width: 100%;
		text-align: center;
		overflow: hidden;

		image {
			width: 227upx;
			height: 236upx;
			display: block;
			margin: auto;
			margin-top: 200upx;
			margin-bottom: 50upx;
		}

		.no_order_to {
			font-size: 28upx;
			color: #999999;

			text {
				color: #f73e2f;
				text-decoration: underline;
			}
		}
	}
</style>
<style>
	page {
		background-color: #F9F9F9;
		min-height: 100vh;
	}
</style>
